<template>
	<el-container>
		<el-header class="adminui-header">
			<div class="adminui-header-left">
				<div class="logo-bar">
					<img class="logo" src="img/logo.png" />
				</div>
			</div>
			<div class="tablet-header">
				<span>产线编号：{{ lineCode }}</span>
				<span style="margin-left: 20px;">工位编号：{{ opCode }}</span>
			</div>
		</el-header>
		<el-main class="nopadding">
			<el-tabs class="tabs-pages">
				<el-tab-pane lazy>
					<template #label>
						<span class="custom-tabs-label">
							<el-icon><el-icon-house /></el-icon>
							<span>主页</span>
						</span>
					</template>
					<Home :lineCode="lineCode" :opCode="opCode" />
				</el-tab-pane>
				<el-tab-pane lazy>
					<template #label>
						<span class="custom-tabs-label">
							<el-icon><el-icon-document-copy /></el-icon>
							<span>质检</span>
						</span>
					</template>
					<Quality :lineCode="lineCode" :opCode="opCode" />
				</el-tab-pane>
				<el-tab-pane lazy>
					<template #label>
						<span class="custom-tabs-label">
							<el-icon><el-icon-scissor /></el-icon>
							<span>返工</span>
						</span>
					</template>
					<Rework :lineCode="lineCode" :opCode="opCode" />
				</el-tab-pane>
				<el-tab-pane lazy>
					<template #label>
						<span class="custom-tabs-label">
							<el-icon><el-icon-scissor /></el-icon>
							<span>缺陷</span>
						</span>
					</template>
					<Defect :lineCode="lineCode" :opCode="opCode" />
				</el-tab-pane>
			</el-tabs>
		</el-main>
	</el-container>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue';
import Home from "./home/index.vue";
import Quality from "./quality/index.vue";
import Rework from "./rework/index.vue";
import Defect from "./defect/index.vue";

const instance = getCurrentInstance();
const proxy2 = {
	proxy: instance?.proxy,
	globalProp: instance!.appContext.config.globalProperties,
};

const lineCode = ref('');
const opCode = ref('');

onMounted(() => {
	// 从 localStore 中获取产线和工位信息
	const appClient = proxy2.globalProp.$TOOL.data.get("App_Client");
	console.log("appClient", appClient);
	if (!appClient) {
		// 提示没有设置 产线、工位 信息
		proxy2.globalProp.$message.warning('客户端没有设置产线和工位信息');
		return;
	}

	lineCode.value = appClient.lineCode;
	opCode.value = appClient.opCode;
});
</script>

<style lang="scss" scoped>
.tablet-header {
	font-size: 14px;
}

.tabs-pages {
	display: flex;
	flex-flow: column;
	flex-shrink: 0;
	height: 100%;
}

.tabs-pages>.el-tabs__header {
	margin: 0;
}

.tabs-pages>.el-tabs__header .el-tabs__nav-wrap {
	display: flex;
	/* justify-content: center; */
	padding-left: 25px;
}

.tabs-pages>.el-tabs__header .el-tabs__item {
	height: 60px;
	line-height: 60px;
	font-size: 14px;
}

.tabs-pages>:deep(.el-tabs__content) {
	overflow-x: hidden;
	overflow: auto;
	height: 100%;
}

.tabs-pages :deep(.el-tab-pane){
	height: 100%;
}

.tabs-pages .custom-tabs-label {
	padding: 5px 10px 7px 10px;
	border-radius: 6px;
}

.tabs-pages .custom-tabs-label .el-icon {
	vertical-align: middle;
}

.tabs-pages .custom-tabs-label span {
	vertical-align: middle;
	margin-left: 4px;
}

.tabs-pages .is-active .custom-tabs-label {
	background: #edf5ff;
}
</style>
./quality/model
